<template>
  <!-- <ResetPhone :visible="isShow" /> -->
  <div class="header">
    <div>
      <div style="display:inline-block" class="g-pointer" @click="onBack">
        <LeftOutlined /> 返回
      </div>
    </div>
    <div class="g-text-center" @click="onTest">
      批量修改尺寸
    </div>
    <div class="operation">
      <div>已上传 <span class="number">{{ fileLength }}</span> / {{ MAXFILELENGTH }}</div>
      <a-button class="btn ml10" type="default" :disabled="fileLength === 0" @click="onClear">清空列表</a-button>
      <a-upload v-model:fileList="fileData" :showUploadList="false" :multiple="true" accept=".png,.jpg,.jpeg,.gif"
        :customRequest="handlePostFile" @change="handleUploadChange">
        <a-button class="btn ml10" type="default" :disabled="fileLength >= MAXFILELENGTH">继续上传</a-button>
      </a-upload>
      <a-button class="btn ml10" ghost type="primary" :loading="multiloading" @click="onDownload">全部下载</a-button>
    </div>
  </div>
  <div class="input-container">
    <span class="mr10">指定尺寸</span>
    <div>
      <a-input v-model:value="width" style="width:100px;">
        <template #suffix> <span class="cl999">宽</span> </template>
      </a-input>
      <span class="cl999">&nbsp;&nbsp;-&nbsp;&nbsp;</span>
      <a-input v-model:value="height" style="width:100px;">
        <template #suffix> <span class="cl999">高</span> </template>
      </a-input>
      <span class="ml10">px (像素)</span>
      <span class="cl999 ml20">图像将同比缩放，不足部分将用透明底展示</span>
    </div>
  </div>
  <div class="main-section">
    <div :class="['empty-container', fileLength !== 0 ? 'upload-hide' : '']">
      <a-upload v-model:fileList="fileData" :showUploadList="false" :multiple="true" accept=".png,.jpg,.jpeg,.gif"
        :customRequest="handlePostFile" @change="handleUploadChange">
        <div class="upload-card">
          <PlusOutlined />
          <span class="mt10">上传本地图片</span>
        </div>
      </a-upload>
    </div>
    <div class="file-list">
      <div v-for="item in fileData" :key="item.uid" :class="['file-item', item.status === 'error' ? 'error-item' : '']">
        <div v-if="item.status === 'error'" class="error-tips">{{ item.response }}</div>
        <img v-else-if="item.imgPath" class="cover" :src="IMGURL + item.imgPath" alt="">
        <div v-else-if="item.percent" class="mask-section">
          <a-progress type="circle" style="transform: scale(0.3);" :percent="item.percent">
            <template #format="percent">
              <span style="color: #fff">{{ percent }}%</span>
            </template>
          </a-progress>
        </div>
        <div class="cover-mask" v-if="item.status !== 'uploading'">
          <DeleteOutlined class="g-pointer" @click="onDel(item.uid)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script  lang="ts" setup>
import { ref, computed } from 'vue'
import { LeftOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { IMGURL } from '@g/data'
import { zoomImgs } from '@r/api/tools'
import { useUpload } from './useUpload'
import { useDownload } from './useDownload'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { DeleteOutlined } from '@ant-design/icons-vue'
import ResetPhone from '@/components/ResetPhone/index.vue'
let isShow = ref(true)
const appRouter = useRouter()
const { finishCount, multiloading, onMultiDownload } = useDownload()
interface ImgFileT {
  uid: string,
  status: 'done' | 'error' | 'uploading',
  imgPath: string
}
const MAXFILELENGTH = 30
let width = ref(900)
let height = ref(900)
const { fileData, handlePostFile, handleUploadChange } = useUpload((file: any, imgPath: string) => {
  Object.assign(file, {
    imgPath
  })
})
const fileLength = computed(() => {
  return fileData.value.length
})
const onTest = () => {
  console.log(fileData.value)
}
const onBack = () => {
  appRouter.push({
    path: '/product'
  })
}
const onClear = () => {
  fileData.value = [] as any[]
}
const onDel = (id: string) => {
  fileData.value = fileData.value.filter(item => item.uid !== id)
}
const onDownload = () => {
  // 文件数量限制
  if (fileLength.value > MAXFILELENGTH) {
    message.warn('已超出文件数量上限')
    return
  }
  let imagePaths = [] as string[]
  fileData.value.forEach(item => {
    if (item.imgPath) {
      imagePaths.push(item.imgPath)
    }
  })
  if (imagePaths.length === 0) {
    message.warn('请先上传图片')
    return
  }
  multiloading.value = true
  zoomImgs({
    width: width.value,
    height: height.value,
    imagePaths
  })
    .then((res: any) => {
      const urls = res.map((item: string) => IMGURL + item)
      onMultiDownload(urls)
    }).catch(() => {
      multiloading.value = false
    })
}
</script>

<style lang="less" scoped>
.cl999 {
  color: #999;
}

.header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding: 6px 10px;
  box-shadow: inset 0px -1px 0px 0px #EFEFEF;
  background: #FAFAFA;
  color: #666;
}

.operation {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .number {
    color: #FF6923;
  }
}

.btn {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}

.input-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: #fff;
}

.main-section {
  height: calc(100vh - 140px);
  max-width: 1200px;
  background-color: #fff;
  margin: auto;
  margin-top: 16px;
  padding: 20px;
  padding-top: 10px;
}

.empty-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  &.upload-hide {
    position: absolute;
    top: -9999999px;
    left: -9999999px;
  }

  .upload-card {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.file-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .file-item {
    margin: 10px;
    // margin-bottom: 20px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    box-sizing: border-box;
    width: 125px;
    height: 125px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    &:hover .cover-mask {
      display: flex;
    }

    &.error-item {
      color: red;
      border-color: red;
    }

    .cover {
      width: 125px;
      height: 125px;
      border-radius: 4px;
    }

    .cover-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 20px;
      display: none;
    }
  }
}
</style>